<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <head>
        <title>Employee Profile</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <ui:composition template="com.template/AdminTemplate.xhtml">
            <ui:define name="page-content">
                <div class="row">
                    <ol class="breadcrumb" style="background-color: #fff;">                        
                        <li><a href="#">Blue Pumpkin</a></li>
                        <li><a href="employees.xhtml">Employees</a></li>
                        <li class="active">Employee Name Profile</li>
                    </ol>
                </div>
                <div class="row">
                </div>
                <div class="row">

                    <div class="col-lg-4 col-md-3 col-xs-2">     
                        <div class=" row thumbnail">                            
                            <img class="img-responsive" src="#{employeeManager.employee.avatar}" alt="Generic placeholder image"/>    
                        </div>                        
                        <p></p>
                        <div class="panel panel-default row">
                            <div class="panel-heading text-center">                                
                                <a class="btn btn-link btn-outline" id="myTooltipMsgAvatar" href="#msgmodal" role="button" data-toggle="modal" title="Write a message." data-placement="top">
                                    <i class="fa fa-envelope fa-fw"></i><strong> Emma Charlotte Duerre Watson</strong>
                                </a>
                                <div class="modal fade" id="msgmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"></span><span class="sr-only">Close</span></button>
                                                <h4 class="modal-title" id="myModalLabel">Send Message: </h4>
                                            </div>
                                            <div class="modal-body">                                                
                                                Write something here...                                                
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                <button type="button" class="btn btn-primary">Save changes</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel-footer text-center">
                                <span class="label label-success">Working <i class="fa fa-globe"></i> </span>                                    
                                <div class="clearfix"></div>
                            </div>

                        </div>
                    </div>
                    <!--end col-md-4-->
                    <div class="col-md-6 col-xs-6">
                        <ul id="myTab" class="nav nav-tabs" role="tablist">
                            <li class="active"><a href="#myTabInfo" role="tab" data-toggle="tab">Information</a></li>
                            <li><a href="#myTabFriends" role="tab" data-toggle="tab">Friends</a></li>
                            <li class="dropdown">
                                <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Event <span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                                    <li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">News</a></li>
                                    <li><a href="#dropdown2" tabindex="-1" role="tab" data-toggle="tab">History</a></li>
                                </ul>
                            </li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <div class="tab-pane fade in active" id="myTabInfo">
                                <div class="row">
                                    <div class ="col-md-12">
                                        <div class="well">
                                            <h4>Contact Information</h4>
                                            <ul class="list-group">
                                                <li class="list-group-item" style="border: none;">
                                                    <span class="pull-left text-muted small">
                                                        <i class="fa fa-phone"></i> phone
                                                    </span><br/>
                                                    <span class="text-info">#{employeeManager.employee.phone}</span><br/>
                                                    <span class="pull-left text-muted small">
                                                        <i class="fa fa-mobile-phone"></i> mobile phone
                                                    </span><br/>
                                                    <span class="text-info">#{employeeManager.employee.mobilephone}</span><br/>
                                                    <span class="pull-left text-muted small">
                                                        <i class="fa fa-envelope"></i> email
                                                    </span><br/>
                                                    <span class="text-info">#{employeeManager.employee.email}</span><br/>
                                                    <span class="pull-left text-muted small">
                                                        <i class="fa fa-map-marker"></i> address
                                                    </span><br/>
                                                    <span class="text-info">#{employeeManager.employee.address}</span><br/>
                                                </li>
                                            </ul>
                                            <h4>Generation Information</h4>
                                            <ul class="list-group">
                                                <li class="list-group-item" style="border: none;">
                                                    <span class="pull-left text-muted small"> 
                                                        <i class="fa fa-clock-o"></i> last logged in 
                                                    </span><br/>
                                                    <span class="text-info">#{employeeManager.employee.logged}</span><br/>
                                                    <span class="pull-left text-muted small">
                                                        <i class="fa fa-briefcase"></i> position
                                                    </span><br/>
                                                    <span class="text-info">#{employeeManager.employee.position}</span><br/>                                                    
                                                    <span class="pull-left text-muted small">
                                                        <i class="fa fa-sitemap"></i> departments
                                                    </span><br/>
                                                    <span class="text-info">#{employeeManager.employee.departments}</span><br/>
                                                    <span class="pull-left text-muted small">
                                                        <i class="fa fa-calendar-o"></i> joined in
                                                    </span><br/>
                                                    <span class="text-info">#{employeeManager.employee.joinInDate}</span><br/>
                                                    <span class="pull-left text-muted small">
                                                        <i class="fa fa-tag"></i> role
                                                    </span><br/>
                                                    <span class="text-info">Employee</span><br/>
                                                </li>
                                            </ul>

                                            <h4>Additional Information</h4>
                                            <ul class="list-group">
                                                <li class="list-group-item" style="border: none;">
                                                    <span class="pull-left text-muted small">
                                                        <i class="fa fa-credit-card"></i> identity card
                                                    </span><br/>
                                                    <span class="text-info">#{employeeManager.employee.identityCard}</span><br/>
                                                    <span class="pull-left text-muted small">
                                                        <i class="fa fa-gift"></i> birthday
                                                    </span><br/>
                                                    <span class="text-info">#{employeeManager.employee.birthdate}</span><br/>
                                                    <span class="pull-left text-muted small">
                                                        <i class="fa fa-user"></i> gender
                                                    </span><br/>
                                                    <span class="text-info">#{employeeManager.employee.gender}</span><br/>
                                                    <span class="pull-left text-muted small">
                                                        <i class="fa fa-users"></i> group
                                                    </span><br/>
                                                    <span class="text-info">#{employeeManager.employee.group}</span><br/>
                                                </li>
                                            </ul>
                                        </div>                                        
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="myTabFriends">
                                <h4></h4>
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 col-xs-6 thumb">
                                        <a class="thumbnail" href="#">
                                            <img class="img-responsive" src="http://placehold.it/400x300" alt=""/>
                                        </a>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-xs-6 thumb">
                                        <a class="thumbnail" href="#">
                                            <img class="img-responsive" src="http://placehold.it/400x300" alt=""/>
                                        </a>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-xs-6 thumb">
                                        <a class="thumbnail" href="#">
                                            <img class="img-responsive" src="http://placehold.it/400x300" alt=""/>
                                        </a>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-xs-6 thumb">
                                        <a class="thumbnail" href="#">
                                            <img class="img-responsive" src="http://placehold.it/400x300" alt=""/>
                                        </a>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-xs-6 thumb">
                                        <a class="thumbnail" href="#">
                                            <img class="img-responsive" src="http://placehold.it/400x300" alt=""/>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="dropdown1">
                                <p>Events are being enjoyed !</p>
                            </div>
                            <div class="tab-pane fade" id="dropdown2">
                                <p>Events were enjoyed !</p>
                            </div>
                        </div>
                    </div>
                    <!--end col-md-6-->
                    <div class="col-lg-2 col-md-3 col-xs-4">                        
                        <div class="panel panel-info">
                            <div class="panel-heading">
                                Actions
                            </div>
                            <div class="panel-body">
                                <p><a href="#editprofile" class="btn btn-block" data-toggle="modal"><i class="glyphicon glyphicon-pencil"></i> Edit Profile</a></p>
                                <div class="modal fade" id="editprofile" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"></span><span class="sr-only">Close</span></button>
                                                <h4 class="modal-title" id="myModalLabel">Edit Profile Panel</h4>
                                            </div>
                                            <div class="modal-body">                                                
                                                <ul class="list-group">

                                                    <div class="panel panel-default">
                                                        <div class="panel-heading">
                                                            <div class="row">
                                                                <div class="col-lg-12 col-md-12 col-sm-12">
                                                                    <span class="pull-left">
                                                                        Change</span>
                                                                    <span class="pull-right">
                                                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" style="color: #000;">
                                                                            <i class="fa fa-chevron-down"></i>
                                                                        </a>
                                                                    </span>
                                                                </div>
                                                            </div>                                            
                                                        </div>
                                                        <div id="collapseOne" class="panel-collapse collapse in">
                                                            <div class="panel-body">
                                                                <div class="form-group"> 
                                                                    <div class="col-xs-12 ">
                                                                        <span class="text-info">
                                                                            <h:inputSecret p:placeholder="Enter New Password" id="txtNewPass" class="form-control"></h:inputSecret>
                                                                        </span> 
                                                                    </div>
                                                                    <br/> 
                                                                    <br/>
                                                                    <br/>
                                                                    <div class="col-xs-12 ">
                                                                        <span class="text-info">
                                                                            <h:inputSecret p:placeholder="Re-type New Password" id="txtPhone" class="form-control">
                                                                            </h:inputSecret></span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="panel panel-default">
                                                        <div class="panel-heading">
                                                            <div class="row">
                                                                <div class="col-lg-12 col-md-12 col-sm-12">
                                                                    <span class="pull-left">
                                                                        Contact Information</span>
                                                                    <span class="pull-right">
                                                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" style="color: #000;">
                                                                            <i class="fa fa-chevron-down"></i>
                                                                        </a>
                                                                    </span>
                                                                </div>
                                                            </div>                                            
                                                        </div>
                                                        <div id="collapseTwo" class="panel-collapse collapse in">
                                                            <div class="panel-body">
                                                                <div class="form-group"> 
                                                                    <div class="col-xs-12 ">
                                                                        <span class="text-info"><h:inputText p:placeholder="Phone" id="txtPhone" class="form-control"></h:inputText></span><br/>
                                                                    </div>
                                                                    <br/> <br/>
                                                                    <div class="col-xs-12 ">
                                                                        <span class="text-info"><h:inputText p:placeholder="Mobile Phone" id="txtMobiPhone" class="form-control"></h:inputText></span><br/>

                                                                    </div>
                                                                    <br/> <br/>
                                                                    <div class="col-xs-12 ">
                                                                        <span class="text-info"><h:inputText p:placeholder="Mobile Phone" id="txtMobiPhone" class="form-control"></h:inputText></span><br/>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>


                                                    <div class="panel panel-default">
                                                        <div class="panel-heading">
                                                            <div class="row">
                                                                <div class="col-lg-12 col-md-12 col-sm-12">
                                                                    <span class="pull-left"><i class="fa fa-tags fa-fw"></i> Generation Information</span>
                                                                    <span class="pull-right">
                                                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" style="color: #000;">
                                                                            <i class="fa fa-chevron-down"></i>
                                                                        </a>
                                                                    </span>                                                    
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div id="collapseThree" class="panel-collapse collapse">
                                                            <div class="panel-body">
                                                                <div class="form-group"> 
                                                                    <div class="col-xs-12 ">
                                                                        <span class="text-info"><h:inputText p:placeholder="Last logged in"  id="txtlastLoggedIn" class="form-control"></h:inputText></span><br/>
                                                                        <span class="text-info"><h:inputText p:placeholder="Position" id="txtPosition" class="form-control"></h:inputText></span><br/>                                                    
                                                                        <span class="text-info"><h:inputText p:placeholder="Departments" id="txtDepartments" class="form-control"></h:inputText></span><br/>
                                                                        <span class="text-info"><h:inputText p:placeholder="Joined in" id="txtJoinedIn" class="form-control"></h:inputText></span><br/>
                                                                        <span class="text-info"><h:inputText p:placeholder="Role" id="txtRole" class="form-control"></h:inputText></span><br/>

                                                                    </div>	         
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="panel panel-default">
                                                        <div class="panel-heading">
                                                            <div class="row">
                                                                <div class="col-lg-12 col-md-12 col-sm-12">
                                                                    <span class="pull-left"><i class="fa fa-tags fa-fw"></i> Additional Information</span>
                                                                    <span class="pull-right">
                                                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree1" style="color: #000;">
                                                                            <i class="fa fa-chevron-down"></i>
                                                                        </a>
                                                                    </span>                                                    
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div id="collapseThree1" class="panel-collapse collapse">
                                                            <div class="panel-body">
                                                                <div class="form-group"> 
                                                                    <div class="col-xs-12 ">
                                                                        <span class="text-info"><h:inputText p:placeholder="Identity card" id="txtIdentityCard" class="form-control"></h:inputText></span><br/>
                                                                        <span class="text-info"><h:inputText p:placeholder="Birthday" id="txtBirthday" class="form-control"></h:inputText></span><br/>
                                                                        <span class="text-info"><h:inputText p:placeholder="Gender" id="txtGender" class="form-control"></h:inputText></span><br/>
                                                                        <span class="text-info"><h:inputText p:placeholder="Group" id="txtGroup" class="form-control"></h:inputText></span><br/>

                                                                    </div>	         
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </ul>                                                
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                <button type="button" class="btn btn-primary">Save changes</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end col-md-2-->

                </div>

            </ui:define>
        </ui:composition>
        <script type="text/javascript">
            $('document').ready(function() {
                $('#myTooltipMsgAvatar').tooltip();
                $('#myTab a').click(function(e) {
                    e.preventDefault();
                    $(this).tab('show');
                });


//                $('#myTooltipMsgAvatar').hover(function(e) {
//                    e.preventDefault();
//                    $(this).tooltip();
//                });
            });
        </script>
    </body>
</html>
